<template>
  <div class="login-container">
    <el-card class="login-card">
      <template #header>
        <div class="header-title">注册</div>
      </template>

      <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules"
               label-width="auto" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model.number="ruleForm.username" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model.number="ruleForm.nickname" placeholder="请输入昵称"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" autocomplete="off" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPassword">
          <el-input v-model="ruleForm.checkPassword" type="password" autocomplete="off" placeholder="请确认密码" />
        </el-form-item>

        <el-form-item>
          <div class="button-group">
            <el-button type="primary" @click="submitForm(ruleFormRef)" class="full-width">注册</el-button>
            <el-button @click="resetForm(ruleFormRef)" class="full-width">重置</el-button>
          </div>
          <div class="back-to-login">
            已有账号？
            <el-link type="primary" @click="goToLogin">去登录</el-link>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import router from '@/router/router.js'
import { reactive, ref } from 'vue'
import { createUser } from '../api/userApi.js'
import messagePost from '../utils/message.js'

const ruleFormRef = ref()

const ruleForm = reactive({
  username: '',
  nickname: '',
  password: '',
  checkPassword: '',
})

const rules = reactive({
  username: [
    { required: true, message: '用户名必填', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9]{1,18}$/, message: '仅支持英文字符和数字，最多18个字符', trigger: 'blur' }
  ],
  nickname: [
    { required: true, message: '昵称必填', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码必填', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        const hasLetter = /[a-zA-Z]/.test(value);
        const hasDigit = /\d/.test(value);
        if (!hasLetter || !hasDigit) {
          callback(new Error('密码需同时包含字母和数字'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
  checkPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== ruleForm.password) {
          callback(new Error('两次密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
});

const goToLogin = () => {
  router.push({ path: '/login' })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.value.resetFields()
}

const submitForm = (formEl) => {
  if (!ruleForm.username || !ruleForm.password || !ruleForm.nickname || !ruleForm.checkPassword) {
    messagePost({
      message: "请输入所有字段后再提交",
      type: 'error',
    });
    return;
  }

  formEl.validate(async (valid) => {
    if (valid) {
      console.log(ruleForm);
      let resp = await createUser(ruleForm)
      console.log(resp);
      if (resp) {
        // 回到登录页面
        router.push({ path: '/login' })
      } else {
        // 清空表单
        resetForm(ruleFormRef)
      }
    } else {
      resetForm(ruleFormRef)
    }
  })
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url('https://picsum.photos/1920/1080');
  background-size: cover;
  background-position: center;
  transition: background 0.5s ease;
}

.login-card {
  width: 100%;
  max-width: 480px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  animation: fadeInDown 1s ease-in-out;
}

.header-title {
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  color: #333;
}

.full-width {
  width: 100%;
}

.button-group {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 10px;
}

.back-to-login {
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
  color: #555;
}

.back-to-login a {
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.back-to-login a:hover {
  color: #3366cc;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>